<template>
  <div>
    <p>click {{count}} times, count is {{evenOrOdd}}</p>
    <button @click="inrement">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">increment if odd</button>
    <button @click="incrementAsync">increment async</button>
  </div>
</template>

<script>
import {mapState, mapGetters, mapActions} from 'vuex'
export default {

  computed: {
    /*evenOrOdd () {
      return this.$store.getters.evenOrOdd
    },
    count () {
      return this.$store.state.count
    }*/
    ...mapState(['count']),//mapState()返回值：{count(){return this.$store.state['count']}}
    ...mapGetters(['evenOrOdd']),//mapGetters()返回值对象：{evenOrOdd(){return this.$store.getters['evenOrOdd']}}
  },

  methods: {
    /*//增加
    inrement () {
      //通知vuex去增加
      this.$store.dispatch('inrement')//触发store中对应的actions调用
    },
    //减少
    decrement () {
      this.$store.dispatch('derement')
    },
    //如果是奇数才增加
    incrementIfOdd () {
      this.$store.dispatch('incrementIfOdd')
    },
    //过1秒才增加
    incrementAsync () {
      this.$store.dispatch('incrementAsync')
    }*/
    ...mapActions(['inrement', 'decrement', 'incrementIfOdd', 'incrementAsync'])
  }
}
</script>

<style>

</style>
